<template>
  <div class="order-confirm" style="min-height: 83vh; padding-bottom: 80px;position: relative;">
    <div style="display: flex;flex-wrap: wrap; gap: 10px; align-items: flex-start;">
      <h2 style="display: inline-block;font-size: 18px;font-weight: bold;">订单确认</h2>
      <div class="dd">
        {{ Text }}
      </div>
    </div>

    <el-table :data="orderItems" style="width: 100%;font-size: 16px;" fit border>
      <el-table-column prop="vipType" label="配置详情" align="center" min-width="100">
        <template #default="{ row }">
          <span>{{ getAreaText(row.vipType) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="paymentMethod" label="付款方式" align="center" min-width="100" />
      <el-table-column prop="num" label="数量" align="center" min-width="100" />
      <el-table-column prop="duration" label="时长" align="center" min-width="100" />
      <el-table-column prop="amount" :label="'单价'" align="center" min-width="100">
        <template #default="{ row }">
          <span style="color: rgba(255, 46, 46, 1); font-size: 28px;">￥{{ row.amount }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增服务协议勾选框 -->
    <div class="agreement">
      <span>
        服务协议
      </span>
      <el-checkbox v-model="isAgreed" style="font-size: 16px!important;">我已阅读并同意
        <a @click="userHandle()" >《金诺云展会员服务协议》</a></el-checkbox>
    </div>
    <div v-if="mwebUrl" class="qrcode-container">
      <div v-if="qrcodeLoading" class="qrcode-loading">
        <el-icon><Loading /></el-icon>
        <span>二维码正在加载...</span>
      </div>
      <img
        v-show="!qrcodeLoading"
        style="border:15px solid #ffffff;"
        :src="'https://test.noctech.cn/h5/createQrcode?content=' + encodeURIComponent(mwebUrl)"
        @load="qrcodeLoading = false"
        @error="qrcodeLoading = false"
      />
      <p v-if="!qrcodeLoading" class="qrcode-tip">请使用微信扫描二维码支付</p>
    </div>
    <div style="position: absolute; bottom: 120px; right: 63px;">
      <div style="overflow: hidden;">
        <div class="total-cost" style="float: left;">
          <div style="float: left;line-height: 45px;padding-top: 6px;">应付费用：</div>
          <div style="float: left;" class="price">￥{{ datalist.payAmount / 100 }}</div>
        </div>
        <div class="payment-btn" style="float: left; margin-left: 25px; margin-top: 27px;" v-if="!mwebUrl">
          <el-button type="primary" @click="handlePayment" :disabled="totalCost === 0">
            立即支付
          </el-button>
        </div>
      </div>

    </div>
    <el-dialog v-model="showSuccessModal" title="" :show-close="true" :close-on-click-modal="false" center width="30%"
      class="custom-success-dialog" @close="handleDialogClose" style="box-shadow: none; /* 去掉阴影 */
  background: none">
      <div style="text-align: center; padding: 20px 0;">
        <img src="@/assets/images/chengg.png" alt="支付成功" style="width: 455px;
height: 439px; margin-bottom: 20px;">
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted, onActivated } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from "element-plus";
import { CacheToken } from "@/constants/cacheKey";
import { getCache, setCache } from "@/utils/cache";
import baseService from "@/service/baseService";
import Template from "@/views/devtools/template.vue";
//import QrcodeVue from 'qrcode.vue'; // 添加二维码组件导入
const router = useRouter();
const route = useRoute();
const datalist = ref({} as any);
const orderNum = ref('');
const Text = ref('');
const showSuccessModal = ref(false); // 添加成功弹窗显示控制变量

const mwebUrl = ref('');
const pollTimer = ref<NodeJS.Timeout | null>(null); // 添加轮询定时器

// 模拟订单数据
const orderItems = ref([
  {
    vipType: '历届展会包套餐',
    paymentMethod: '在线支付',
    num: 0,
    duration: '1 年',
    amount: 0
  }
]);

const convertAreaCode = (code: string) => {
  const areaMap: { [key: string]: string } = {
    // 华北地区
    '110000': '北京市',
    '120000': '天津市',
    '130000': '河北省',
    '140000': '山西省',
    '150000': '内蒙古自治区',

    // 东北地区
    '210000': '辽宁省',
    '220000': '吉林省',
    '230000': '黑龙江省',

    // 华东地区
    '310000': '上海市',
    '320000': '江苏省',
    '330000': '浙江省',
    '340000': '安徽省',
    '350000': '福建省',
    '360000': '江西省',
    '370000': '山东省',

    // 中南地区
    '410000': '河南省',
    '420000': '湖北省',
    '430000': '湖南省',
    '440000': '广东省',
    '450000': '广西壮族自治区',
    '460000': '海南省',

    // 西南地区
    '500000': '重庆市',
    '510000': '四川省',
    '520000': '贵州省',
    '530000': '云南省',
    '540000': '西藏自治区',

    // 西北地区
    '610000': '陕西省',
    '620000': '甘肃省',
    '630000': '青海省',
    '640000': '宁夏回族自治区',
    '650000': '新疆维吾尔自治区',

    // 港澳台
    '810000': '香港特别行政区',
    '820000': '澳门特别行政区',
    '710000': '台湾省',

    // 直辖市下辖区县
    '110101': '东城区',
    '110102': '西城区',
    '110105': '朝阳区',
    '110106': '丰台区',
    '110107': '石景山区',
    '110108': '海淀区',
    '110109': '门头沟区',
    '110111': '房山区',
    '110112': '通州区',
    '110113': '顺义区',
    '110114': '昌平区',
    '110115': '大兴区',
    '110116': '怀柔区',
    '110117': '平谷区',
    '110118': '密云区',
    '110119': '延庆区',

    '120101': '和平区',
    '120102': '河东区',
    '120103': '河西区',
    '120104': '南开区',
    '120105': '河北区',
    '120106': '红桥区',
    '120110': '东丽区',
    '120111': '西青区',
    '120112': '津南区',
    '120113': '北辰区',
    '120114': '武清区',
    '120115': '宝坻区',
    '120116': '滨海新区',
    '120117': '宁河区',
    '120118': '静海区',
    '120119': '蓟州区',

    '310101': '黄浦区',
    '310104': '徐汇区',
    '310105': '长宁区',
    '310106': '静安区',
    '310107': '普陀区',
    '310109': '虹口区',
    '310110': '杨浦区',
    '310112': '闵行区',
    '310113': '宝山区',
    '310114': '嘉定区',
    '310115': '浦东新区',
    '310116': '金山区',
    '310117': '松江区',
    '310118': '青浦区',
    '310120': '奉贤区',
    '310151': '崇明区',

    '500101': '万州区',
    '500102': '涪陵区',
    '500103': '渝中区',
    '500104': '大渡口区',
    '500105': '江北区',
    '500106': '沙坪坝区',
    '500107': '九龙坡区',
    '500108': '南岸区',
    '500109': '北碚区',
    '500110': '綦江区',
    '500111': '大足区',
    '500112': '渝北区',
    '500113': '巴南区',
    '500114': '黔江区',
    '500115': '长寿区',
    '500116': '江津区',
    '500117': '合川区',
    '500118': '永川区',
    '500119': '南川区',
    '500120': '璧山区',
    '500151': '铜梁区',
    '500152': '潼南区',
    '500153': '荣昌区',
    '500154': '开州区',
    '500155': '梁平区',
    '500156': '武隆区',
    '500229': '城口县',
    '500230': '丰都县',
    '500231': '垫江县',
    '500233': '忠县',
    '500235': '云阳县',
    '500236': '奉节县',
    '500237': '巫山县',
    '500238': '巫溪县',
    '500240': '石柱土家族自治县',
    '500241': '秀山土家族苗族自治县',
    '500242': '酉阳土家族苗族自治县',
    '500243': '彭水苗族土家族自治县',

    // 河北省地级市
    '130100': '石家庄市',
    '130200': '唐山市',
    '130300': '秦皇岛市',
    '130400': '邯郸市',
    '130500': '邢台市',
    '130600': '保定市',
    '130700': '张家口市',
    '130800': '承德市',
    '130900': '沧州市',
    '131000': '廊坊市',
    '131100': '衡水市',

    // 山西省地级市
    '140100': '太原市',
    '140200': '大同市',
    '140300': '阳泉市',
    '140400': '长治市',
    '140500': '晋城市',
    '140600': '朔州市',
    '140700': '晋中市',
    '140800': '运城市',
    '140900': '忻州市',
    '141000': '临汾市',
    '141100': '吕梁市',

    // 内蒙古自治区地级市
    '150100': '呼和浩特市',
    '150200': '包头市',
    '150300': '乌海市',
    '150400': '赤峰市',
    '150500': '通辽市',
    '150600': '鄂尔多斯市',
    '150700': '呼伦贝尔市',
    '150800': '巴彦淖尔市',
    '150900': '乌兰察布市',
    '152200': '兴安盟',
    '152500': '锡林郭勒盟',
    '152900': '阿拉善盟',

    // 辽宁省地级市
    '210100': '沈阳市',
    '210200': '大连市',
    '210300': '鞍山市',
    '210400': '抚顺市',
    '210500': '本溪市',
    '210600': '丹东市',
    '210700': '锦州市',
    '210800': '营口市',
    '210900': '阜新市',
    '211000': '辽阳市',
    '211100': '盘锦市',
    '211200': '铁岭市',
    '211300': '朝阳市',
    '211400': '葫芦岛市',

    // 吉林省地级市
    '220100': '长春市',
    '220200': '吉林市',
    '220300': '四平市',
    '220400': '辽源市',
    '220500': '通化市',
    '220600': '白山市',
    '220700': '松原市',
    '220800': '白城市',
    '222400': '延边朝鲜族自治州',

    // 黑龙江省地级市
    '230100': '哈尔滨市',
    '230200': '齐齐哈尔市',
    '230300': '鸡西市',
    '230400': '鹤岗市',
    '230500': '双鸭山市',
    '230600': '大庆市',
    '230700': '伊春市',
    '230800': '佳木斯市',
    '230900': '七台河市',
    '231000': '牡丹江市',
    '231100': '黑河市',
    '231200': '绥化市',
    '232700': '大兴安岭地区',

    // 江苏省地级市
    '320100': '南京市',
    '320200': '无锡市',
    '320300': '徐州市',
    '320400': '常州市',
    '320500': '苏州市',
    '320600': '南通市',
    '320700': '连云港市',
    '320800': '淮安市',
    '320900': '盐城市',
    '321000': '扬州市',
    '321100': '镇江市',
    '321200': '泰州市',
    '321300': '宿迁市',

    // 浙江省地级市
    '330100': '杭州市',
    '330200': '宁波市',
    '330300': '温州市',
    '330400': '嘉兴市',
    '330500': '湖州市',
    '330600': '绍兴市',
    '330700': '金华市',
    '330800': '衢州市',
    '330900': '舟山市',
    '331000': '台州市',
    '331100': '丽水市',

    // 安徽省地级市
    '340100': '合肥市',
    '340200': '芜湖市',
    '340300': '蚌埠市',
    '340400': '淮南市',
    '340500': '马鞍山市',
    '340600': '淮北市',
    '340700': '铜陵市',
    '340800': '安庆市',
    '341000': '黄山市',
    '341100': '滁州市',
    '341200': '阜阳市',
    '341300': '宿州市',
    '341500': '六安市',
    '341600': '亳州市',
    '341700': '池州市',
    '341800': '宣城市',

    // 福建省地级市
    '350100': '福州市',
    '350200': '厦门市',
    '350300': '莆田市',
    '350400': '三明市',
    '350500': '泉州市',
    '350600': '漳州市',
    '350700': '南平市',
    '350800': '龙岩市',
    '350900': '宁德市',

    // 江西省地级市
    '360100': '南昌市',
    '360200': '景德镇市',
    '360300': '萍乡市',
    '360400': '九江市',
    '360500': '新余市',
    '360600': '鹰潭市',
    '360700': '赣州市',
    '360800': '吉安市',
    '360900': '宜春市',
    '361000': '抚州市',
    '361100': '上饶市',

    // 山东省地级市
    '370100': '济南市',
    '370200': '青岛市',
    '370300': '淄博市',
    '370400': '枣庄市',
    '370500': '东营市',
    '370600': '烟台市',
    '370700': '潍坊市',
    '370800': '济宁市',
    '370900': '泰安市',
    '371000': '威海市',
    '371100': '日照市',
    '371300': '临沂市',
    '371400': '德州市',
    '371500': '聊城市',
    '371600': '滨州市',
    '371700': '菏泽市',

    // 河南省地级市
    '410100': '郑州市',
    '410200': '开封市',
    '410300': '洛阳市',
    '410400': '平顶山市',
    '410500': '安阳市',
    '410600': '鹤壁市',
    '410700': '新乡市',
    '410800': '焦作市',
    '410900': '濮阳市',
    '411000': '许昌市',
    '411100': '漯河市',
    '411200': '三门峡市',
    '411300': '南阳市',
    '411400': '商丘市',
    '411500': '信阳市',
    '411600': '周口市',
    '411700': '驻马店市',
    '419001': '济源市',

    // 湖北省地级市
    '420100': '武汉市',
    '420200': '黄石市',
    '420300': '十堰市',
    '420500': '宜昌市',
    '420600': '襄阳市',
    '420700': '鄂州市',
    '420800': '荆门市',
    '420900': '孝感市',
    '421000': '荆州市',
    '421100': '黄冈市',
    '421200': '咸宁市',
    '421300': '随州市',
    '422800': '恩施土家族苗族自治州',
    '429004': '仙桃市',
    '429005': '潜江市',
    '429006': '天门市',
    '429021': '神农架林区',

    // 湖南省地级市
    '430100': '长沙市',
    '430200': '株洲市',
    '430300': '湘潭市',
    '430400': '衡阳市',
    '430500': '邵阳市',
    '430600': '岳阳市',
    '430700': '常德市',
    '430800': '张家界市',
    '430900': '益阳市',
    '431000': '郴州市',
    '431100': '永州市',
    '431200': '怀化市',
    '431300': '娄底市',
    '433100': '湘西土家族苗族自治州',

    // 广东省地级市
    '440100': '广州市',
    '440200': '韶关市',
    '440300': '深圳市',
    '440400': '珠海市',
    '440500': '汕头市',
    '440600': '佛山市',
    '440700': '江门市',
    '440800': '湛江市',
    '440900': '茂名市',
    '441200': '肇庆市',
    '441300': '惠州市',
    '441400': '梅州市',
    '441500': '汕尾市',
    '441600': '河源市',
    '441700': '阳江市',
    '441800': '清远市',
    '441900': '东莞市',
    '442000': '中山市',
    '445100': '潮州市',
    '445200': '揭阳市',
    '445300': '云浮市',

    // 广西壮族自治区地级市
    '450100': '南宁市',
    '450200': '柳州市',
    '450300': '桂林市',
    '450400': '梧州市',
    '450500': '北海市',
    '450600': '防城港市',
    '450700': '钦州市',
    '450800': '贵港市',
    '450900': '玉林市',
    '451000': '百色市',
    '451100': '贺州市',
    '451200': '河池市',
    '451300': '来宾市',
    '451400': '崇左市',

    // 海南省地级市
    '460100': '海口市',
    '460200': '三亚市',
    '460300': '三沙市',
    '460400': '儋州市',
    '469001': '五指山市',
    '469002': '琼海市',
    '469005': '文昌市',
    '469006': '万宁市',
    '469007': '东方市',
    '469021': '定安县',
    '469022': '屯昌县',
    '469023': '澄迈县',
    '469024': '临高县',
    '469025': '白沙黎族自治县',
    '469026': '昌江黎族自治县',
    '469027': '乐东黎族自治县',
    '469028': '陵水黎族自治县',
    '469029': '保亭黎族苗族自治县',
    '469030': '琼中黎族苗族自治县',

    // 四川省地级市
    '510100': '成都市',
    '510300': '自贡市',
    '510400': '攀枝花市',
    '510500': '泸州市',
    '510600': '德阳市',
    '510700': '绵阳市',
    '510800': '广元市',
    '510900': '遂宁市',
    '511000': '内江市',
    '511100': '乐山市',
    '511300': '南充市',
    '511400': '眉山市',
    '511500': '宜宾市',
    '511600': '广安市',
    '511700': '达州市',
    '511800': '雅安市',
    '511900': '巴中市',
    '512000': '资阳市',
    '513200': '阿坝藏族羌族自治州',
    '513300': '甘孜藏族自治州',
    '513400': '凉山彝族自治州',

    // 贵州省地级市
    '520100': '贵阳市',
    '520200': '六盘水市',
    '520300': '遵义市',
    '520400': '安顺市',
    '520500': '毕节市',
    '520600': '铜仁市',
    '522300': '黔西南布依族苗族自治州',
    '522600': '黔东南苗族侗族自治州',
    '522700': '黔南布依族苗族自治州',

    // 云南省地级市
    '530100': '昆明市',
    '530300': '曲靖市',
    '530400': '玉溪市',
    '530500': '保山市',
    '530600': '昭通市',
    '530700': '丽江市',
    '530800': '普洱市',
    '530900': '临沧市',
    '532300': '楚雄彝族自治州',
    '532500': '红河哈尼族彝族自治州',
    '532600': '文山壮族苗族自治州',
    '532800': '西双版纳傣族自治州',
    '532900': '大理白族自治州',
    '533100': '德宏傣族景颇族自治州',
    '533300': '怒江傈僳族自治州',
    '533400': '迪庆藏族自治州',

    // 西藏自治区地级市
    '540100': '拉萨市',
    '540200': '日喀则市',
    '540300': '昌都市',
    '540400': '林芝市',
    '540500': '山南市',
    '540600': '那曲市',
    '542500': '阿里地区',

    // 陕西省地级市
    '610100': '西安市',
    '610200': '铜川市',
    '610300': '宝鸡市',
    '610400': '咸阳市',
    '610500': '渭南市',
    '610600': '延安市',
    '610700': '汉中市',
    '610800': '榆林市',
    '610900': '安康市',
    '611000': '商洛市',

    // 甘肃省地级市
    '620100': '兰州市',
    '620200': '嘉峪关市',
    '620300': '金昌市',
    '620400': '白银市',
    '620500': '天水市',
    '620600': '武威市',
    '620700': '张掖市',
    '620800': '平凉市',
    '620900': '酒泉市',
    '621000': '庆阳市',
    '621100': '定西市',
    '621200': '陇南市',
    '622900': '临夏回族自治州',
    '623000': '甘南藏族自治州',

    // 青海省地级市
    '630100': '西宁市',
    '630200': '海东市',
    '632200': '海北藏族自治州',
    '632300': '黄南藏族自治州',
    '632500': '海南藏族自治州',
    '632600': '果洛藏族自治州',
    '632700': '玉树藏族自治州',
    '632800': '海西蒙古族藏族自治州',

    // 宁夏回族自治区地级市
    '640100': '银川市',
    '640200': '石嘴山市',
    '640300': '吴忠市',
    '640400': '固原市',
    '640500': '中卫市',

    // 新疆维吾尔自治区地级市
    '650100': '乌鲁木齐市',
    '650200': '克拉玛依市',
    '650400': '吐鲁番市',
    '650500': '哈密市',
    '652300': '昌吉回族自治州',
    '652700': '博尔塔拉蒙古自治州',
    '652800': '巴音郭楞蒙古自治州',
    '652900': '阿克苏地区',
    '653000': '克孜勒苏柯尔克孜自治州',
    '653100': '喀什地区',
    '653200': '和田地区',
    '654000': '伊犁哈萨克自治州',
    '654200': '塔城地区',
    '654300': '阿勒泰地区',
    '659001': '石河子市',
    '659002': '阿拉尔市',
    '659003': '图木舒克市',
    '659004': '五家渠市',
    '659005': '北屯市',
    '659006': '铁门关市',
    '659007': '双河市',
    '659008': '可克达拉市',
    '659009': '昆玉市',
    '659010': '胡杨河市',
    '659011': '新星市'
  };
  return areaMap[code] || code || '未知地区';
};


const getAreaText = (areaCodes: string) => {
  console.log('areaCodes:', areaCodes)
  if (!areaCodes) {
    return '未知地区';
  }
  if (isNaN(Number(areaCodes))) {
    return areaCodes;
  }
  return convertAreaCode(areaCodes);
};

// 新增服务协议勾选状态
const isAgreed = ref(false);
// 计算应付费用总价
const totalCost = computed(() => {
  return "";
});
//二维码正在加载
const qrcodeLoading = ref(true);
const dingd = async () => {
  orderItems.value = [];
  baseService.get('/noc/vip/order/' + orderNum.value, {}).then((res) => {
    if (res.code == 0) {
      datalist.value = res.data.order || [];  // 存储完整地区数据
      orderItems.value = res.data.orderItems;
      orderItems.value.forEach((item: any, index: number) => {
        if (item.vipType == 2 || item.vipType == 3){
          item.vipType = item.area;
        }else {
          item.vipType = item.name;
        }
      });
    }
  })
};

// 弹窗关闭事件处理
const handleDialogClose = () => {
  // 如果不是通过确定按钮关闭（即点击外部关闭）
   if (window.opener) {
        window.close();
      } else {
        // 对用户手动打开的页面，重定向到订单列表页
        router.push('/buyer/customers/list');
        // 或者刷新父页面（如果是从其他页面跳转而来）
        // window.location.href = document.referrer || '/#/buyer/customers/list';
      }
};
// 处理支付逻辑
const handlePayment = () => {
  if (!isAgreed.value) {
    console.log('请先同意服务协议');
    ElMessage({
      message: '请先同意服务协议',
      type: 'error',
    });
    return;
  }
  baseService.post('/noc/vip/toVipOrderPay', {
    id: datalist.value.id,
    orderNum: orderNum.value,
    payAmount: datalist.value.payAmount,
    tradeType: 'NATIVE'
  }).then((res) => {

    if (res.code == 0) {
      mwebUrl.value = res.data.mwebUrl;
      // 启动支付结果轮询
      startPaymentPolling();
    }
  })
  console.log('开始支付，总价：', totalCost.value);
  // 这里可以添加实际的支付逻辑，如调用支付接口
};

// 添加支付轮询函数
const startPaymentPolling = () => {
  // 清除可能存在的旧定时器
  if (pollTimer.value) clearInterval(pollTimer.value);

  // 立即执行一次查询，然后每5秒查询一次
  checkPaymentStatus();
  pollTimer.value = setInterval(checkPaymentStatus, 5000);
};

// 添加支付状态查询函数
const checkPaymentStatus = () => {
  baseService.post(`/noc/vip/wxpay/orderquery`, { orderNum: orderNum.value }).then((res) => {
    if (res.code == 0 && res.data.result_code === 'SUCCESS' && res.data.trade_state === 'SUCCESS') {
      // 支付成功处理
      showSuccessModal.value = true;
      //修改token已经购买了
        const token = getCache(CacheToken, { isSessionStorage: true });
            token.isVip = true;
            setCache(CacheToken, token, { isSessionStorage: true });
      // 清除定时器
      if (pollTimer.value) clearInterval(pollTimer.value);
    }
  }).catch((error) => {
    console.error('查询支付状态失败:', error);
  });
};

// 组件卸载时清除定时器
onUnmounted(() => {
  if (pollTimer.value) {
    clearInterval(pollTimer.value);
    pollTimer.value = null;
  }
});
onActivated(() => {
   // 可以在这里添加获取买家客户列表数据的逻辑
  const orderNums = route.query.orderNum; // Now correctly accesses route query
  const textQuery = route.query.Text;
  if (orderNums && typeof orderNums === 'string') {
    orderNum.value = orderNums;
    dingd()
  }
  if (textQuery && typeof textQuery === 'string') {
    Text.value = textQuery; // Correctly assign query parameter to Text ref
  }
    console.log('页面已显示');
    checkPaymentStatus(); // 重新加载数据

});

const userHandle = () => {
  router.push({
    path: "/buyer/agreement-text",
  });
};

</script>

<style scoped lang="less">
.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:
    120px;
}

:deep(.custom-success-dialog .el-dialog__wrapper) {
  box-shadow: none;
  /* 去掉阴影 */
  background: none
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
  /* 叉号颜色改为白色 */
  font-size: 24px;
  /* 可选项：调整图标大小 */
}

.qrcode {
  margin-bottom: 15px;
}

.qrcode-tip {
  font-size: 16px;
  color: #333;
  /* Fixed missing colon after 'color' */
}

.order-confirm {
  padding: 0 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dd {
  font-size: 14px;
  background: #eff4ff;
  line-height: 24px;
  color: rgba(22, 119, 255, 1);
  padding: 0 10px;
  margin-top: 30px;
  display: inline-block
}

.total-cost {
  margin-top: 20px;
  text-align: right;
  font-size: 16px;
  font-weight: bold;

  .price {
    color: rgba(255, 46, 46, 1);
    font-size: 32px;
    margin-left: 10px;
  }
}

/* 新增服务协议样式 */
.agreement {
  margin-top: 15px;
  text-align: left;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 33px; // 控制元素间的间距

  /* 修改前 */
  .el-checkbox__label {
    font-size: 16px;
  }

  /* 修改后 */
  ::v-deep .el-checkbox__label {
    font-size: 16px !important;
  }

  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #409eff;
    font-size: 16px;
  }

  :deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
    color: #606266; // 设置未选中时的颜色
    font-size: 16px;
    margin-top: 1px;
  }

  a {
    color: #409eff;
    font-size: 16px;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}
.qrcode-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: 16px;
  color: #999;

  .el-icon {
    font-size: 32px;
    margin-bottom: 10px;
  }
}
.payment-btn {
  margin-top: 20px;
  text-align: right;
}
</style>
